
import React from 'react'
import style from './index.module.css';
import { Button, Form, Input, DatePicker, Table, Space } from 'antd';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);
const { RangePicker } = DatePicker;

const columns = [
  {
    title: '订单号',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '订单状态',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '用户名',
    dataIndex: 'user_name',
    key: 'user_name',
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    key: 'phone',
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '下单时间',
    dataIndex: 'orderTime',
    key: 'orderTime',
  },
  {
    title: '实收金额',
    dataIndex: 'amount',
    key: 'amount',
  },
  {
    title: '操作',
    key: 'action',
    render: () => (
      <Space size="middle">
        <a>取消 </a>
        <a>查看</a>
      </Space>
    ),
  },
]
const orderData = [
  {
    key: '1',
    id: '123456789',
    status: '待接单',
    user_name: '张三',
    phone: '123456789',
    address: '北京',
    orderTime: '2023-05-01 12:00:00',
    amount: '100',
  },
  {
    key: '2',
    id: '987654321',
    status: '已接单',
    user_name: '李四',
    phone: '987654321',
    address: '上海',
    orderTime: '2023-05-02 13:30:00',
    amount: '150',
  },
  {
    key: '3',
    id: '135792468',
    status: '配送中',
    user_name: '王五',
    phone: '135792468',
    address: '广州',
    orderTime: '2023-05-03 14:45:00',
    amount: '200',
  },
  {
    key: '4',
    id: '246813579',
    status: '已完成',
    user_name: '赵六',
    phone: '246813579',
    address: '深圳',
    orderTime: '2023-05-04 15:00:00',
    amount: '250',
  },
  {
    key: '5',
    id: '112233445',
    status: '待接单',
    user_name: '孙七',
    phone: '112233445',
    address: '杭州',
    orderTime: '2023-05-05 16:15:00',
    amount: '300',
  },
  {
    key: '6',
    id: '556677889',
    status: '已接单',
    user_name: '周八',
    phone: '556677889',
    address: '南京',
    orderTime: '2023-05-06 17:30:00',
    amount: '350',
  },
  {
    key: '7',
    id: '998877665',
    status: '配送中',
    user_name: '吴九',
    phone: '998877665',
    address: '成都',
    orderTime: '2023-05-07 18:45:00',
    amount: '400',
  },
  {
    key: '8',
    id: '101112131',
    status: '已完成',
    user_name: '郑十',
    phone: '101112131',
    address: '武汉',
    orderTime: '2023-05-08 19:00:00',
    amount: '450',
  },
  {
    key: '9',
    id: '202122232',
    status: '待接单',
    user_name: '钱十一',
    phone: '202122232',
    address: '西安',
    orderTime: '2023-05-09 20:15:00',
    amount: '500',
  },
  {
    key: '10',
    id: '303132333',
    status: '已接单',
    user_name: '王十二',
    phone: '303132333',
    address: '重庆',
    orderTime: '2023-05-10 21:30:00',
    amount: '550',
  },
];


const disabledDate = (current) => {
  // Can not select days before today and today
  return current && current < dayjs().endOf('day');
};
export default function OrderManagement() {
  return (
    <div className={style.container} >
      <div className={style.orderStatus}>
        <Button>全部订单</Button>
        <Button>待接单</Button>
        <Button>待派送</Button>
        <Button>派送中</Button>
        <Button>已完成</Button>
        <Button>已取消</Button>
      </div>
      <Form className={style.form}>
        <Form.Item>
          <div className={style.search}>
            <div className={style.label}>订单号:</div>
            <Input className={style.input}></Input>
            <div className={style.label}>手机号:</div>
            <Input className={style.input}></Input>
            <div className={style.label}>下单时间:</div>
            <RangePicker disabledDate={disabledDate} />
            <Button className={style.searchButton}>查询</Button>
          </div>
        </Form.Item>
        <Table className={style.table} columns={columns} dataSource={orderData}></Table>
      </Form>
    </div >
  )
}
